<!DOCTYPE html>
<html>

<head>
    <title>工作·车队管理系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/css/vant.css">
    <link rel="stylesheet" href="/static/css/StartAdmin.css">

</head>

<body>
<div id="app">
    <van-row>
        <van-nav-bar title="工作"/>
    </van-row>
    <van-row type="flex" justify="center">
        <img src="/static/images/logo.png" width="70px" height="70px">
    </van-row>
    <van-field
            readonly
            clickable
            label="车辆编号"
            :value="carid"
            placeholder="选择车辆"
            @click="showPicker = true"
    ></van-field>

    <van-popup v-if="!drive" v-model="showPicker" round position="bottom">

        <van-picker

                show-toolbar
                :columns="car"
                @cancel="showPicker = false"
                @confirm="onCarConfirm"
        />
        <!--利用插槽slot来实现展示车辆详细信息-->
        <template #option="item">
            <van-row>
                <van-col>
                    <p style="text-align: center">
                        {{ item.cid }}:
                        {{ item.license }}
                        {{ item.brand }}
                        {{ item.type }}
                    </p>
                </van-col>
            </van-row>
        </template>
        </van-picker>
    </van-popup>
        <div style="margin: 16px;">
            <van-button round block v-if="!drive" type="info" @click="startDrive">开始行车</van-button>
            <van-button round block v-if="drive" type="danger" @click="endDrive">结束行车</van-button>
        </div>
    <van-cell-group v-if="drive" title="当前位置信息">
        <van-cell title="经度">{{longitude}}</van-cell>
        <van-cell title="纬度">{{latitude}}</van-cell>
    </van-cell-group>
    <van-cell-group v-if="drive" title="事故上报"></van-cell-group>
    <van-field
            v-if="drive"
            readonly
            clickable
            label="车辆编号"
            :value="carid"
            placeholder="选择车辆"
            @click="showPicker = true"
    ></van-field>
    <van-field
            v-if="drive"
            v-model="remark"
            rows="2"
            autosize
            label="情况描述"
            type="textarea"
            maxlength="50"
            placeholder="请简要说明情况"
            show-word-limit
    ></van-field>
    <div style="margin: 16px;">
        <van-button round block v-if="drive" type="danger" @click="postEm">上报</van-button>
    </div>
    {include file="common/footer"/}
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    active:"work",
                    showPicker: false,
                    drive:false,
                    user: {

                    },
                    car:[

                    ],
                    carid:"",
                    longitude:"",
                    latitude:"",
                    watchid:"",
                    remark:"",
                    int:"",
                }
            },
            mounted () {
                this.abcd();
                this.abc();
            },
            methods: {
                abcd(){
                    var that = this;
                    axios.post('/admin/user/getmyvalue')
                        .then(function (response)
                        {
                            that.user = response.data.data;
                        })
                },
                abc(){
                    var that = this;
                    axios.post('/admin/car/getallfreecar')
                        .then(function (response)
                        {
                            that.car= response.data.data;
                            var i;
                            for(i in that.car){
                                console.log(i);
                                switch(that.car[i].type) {
                                    case 'small_passenger': that.car[i].type = "小型客车";break;
                                    case 'mid_passenger':   that.car[i].type = "中型客车";break;
                                    case 'large_passenger': that.car[i].type = "大型客车";break;
                                    case 'small_cargo':     that.car[i].type = "小型货车";break;
                                    case 'mid_cargo':       that.car[i].type = "中型货车";break;
                                    case 'large_cargo':     that.car[i].type = "大型货车";break;
                                }
                            }
                        })

                },
                onCarConfirm(value) {
                    this.carid = value.cid;
                    this.showPicker = false;
                },
                startDrive(){

                    var that = this;
                    if(!that.carid){
                        alert("请选择车辆！")
                        return;
                    }
                    that.drive = true;
                    var geoLoc;
                    var showLocation = (position) => {
                        that.latitude = position.coords.latitude;
                        that.longitude = position.coords.longitude;
                        console.log("Latitude : " + that.latitude + " Longitude: " + that.longitude);
                        axios.post('worker/addloction', Object.assign({}, PostBase, {
                            lat: that.latitude,
                            lng: that.longitude,
                            userid: that.user.uid,
                            carid: that.carid,
                        }))
                        console.log('1')
                    }
                    var errorHandler = (err) => {
                        if(err.code == 1) {
                            alert("Error: Access is denied!");
                        } else if( err.code == 2) {
                            alert("Error: Position is unavailable!");
                        }
                    }

                    if(navigator.geolocation){
                        geoLoc = navigator.geolocation;

                        that.int=self.setInterval(function (){
                            geoLoc.getCurrentPosition(showLocation, errorHandler);
                            },1000)

                    } else {
                        alert("Sorry, browser does not support geolocation!");
                    }
                },
                endDrive(){
                    var that = this;
                    that.drive = false;
                    that.longitude="";
                    that.latitude="";
                    window.clearInterval(that.int);

                    axios.post('worker/stop', Object.assign({}, PostBase, {
                        carid: that.carid,
                    }))
                },
                postEm(){
                    var that = this;
                    axios.post('worker/addemergency', Object.assign({}, PostBase, {
                        carid: that.carid,
                        remark: that.remark,
                        userid: that.user.uid,
                        lat: that.latitude,
                        lng: that.longitude,
                    }))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                alert('上报成功！')
                            }
                        })
                        .catch(function (error) {
                            alert('Error');
                            console.log(error);
                        });
                }
            }
        })


    </script>

</html>